body{
    font-family: Arial,sans-serif;
    line-height:1.6;
    margin:0;
    padding:0;
    background-color: #f9f9f9;
}
header{
    background-color: #333;
    color:#fff;
    padding:1rem 0;
    text-align:center;
}
nav a{
    color:#fff;
    text-decoration: none;
    margin:0 1rem;
}
section{
    padding:2rem;
    margin:1rem auto;
    max-width: 800px;
    background: #fff;
    border-radius: 5px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}
/* 日历打卡容器的样式 */
#calender-section{
    text-align:center;
}
#calender{
    margin:1rem auto;
    max-width:800px;
    padding:1rem;
    border:1px solid #ddd;
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.1) ;
    background-color: #fdfdfd;
}
/* 鼠标悬停日期样式 */
.fc-daygrid-day{
    cursor:pointer;
    transition:background-color 0.3s;
}
.fc-daygrid-day:hover{
    background-color: #f0f0f0;
}
/* 今日日期高亮 */
.fc-daygrid-day.fc-day-today {
    background-color: #ffeb3b;
}

/* 过去日期半透明 */
.fc-daygrid-day.fc-day-past {
    opacity: 0.7;
}
/* 代办事项固定在左侧 */
#todo-section{
    position:fixed;/*固定定位*/
    top:200px;
    left:10px;
    width:250px;
    height:calc(100vh-20px);/*高度占满视口（减去上下间距）*/
    overflow-y:auto;/*如果内容过多允许滚动*/
    padding:1rem;
    border:1px solid #ddd;
    border-radius:5px;
    background-color: #f9f9f9;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    z-index:1000;/*确报它显示在其他内容之上*/
}
/* 输入框和按钮样式 */
#todo-input{
    display: flex;/*输入框和按钮并排显示*/
    gap: 10px;/*输入框和按钮之间间距10px*/
    margin-bottom: 1rem;/*与下面的任务列表保持1rem的间距*/
}
#new-task{
    flex:1;/*输入框占据容器的剩余空间*/
    padding:0.5rem;
    border:1px solid #ddd;
    border-radius:5px;
}
#add-task{
    padding:0.5rem 1rem;
    border:none;/*去掉默认的边框*/
    background-color: #ffe08c;
    color:white;
    border-radius:5px;
    cursor:pointer;/*鼠标悬停时显示手型*/
}
/* 鼠标悬停时改变按钮颜色 */
#add-task:hover{
    background-color: #f1c542;
}
/* 任务列表样式 */
#todo-list{
    list-style:none;
    padding:0;
    margin:0;
}
#todo-list li{
    display:flex;
    justify-content: space-between;/*左右对齐*/
    align-items:center;
    padding:0.5rem;
    border:1px solid #ddd;
    border-radius:5px;
    margin-bottom:0.5rem;
    background-color:#fff;
}
/* 按钮容器样式 */
。button-container{
    display:flex;
    gap:5px;

}
/* 已完成任务的样式 */
#todo-list li.completed span{
    text-decoration:line-through;/*添加删除线*/
    color:#888;/*文字颜色*/
    font-style: italic;
}
.todo-complete{
    background-color:#ac8124;
    color:white;
    border:none;
    padding:none;
    padding:0.3rem 0.5rem;
    border-radius:5px;
    cursor:pointer;
}
.todo-complete:hover{
    background-color: #218838;
}
/* 删除按钮样式 */
.todo-delete{
    background-color: #e99a4a;
    color:white;
    border:none;
    padding:0.3rem 0.5rem;
    border-radius:5px;
    cursor:pointer;
}
.todo-delete:hover{
    background-color:#a71d2a;
}
